<script setup lang="ts">
import { Sender } from 'ant-design-x-vue'
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { storeToRefs } from 'pinia'
import { useModelStore } from '@/stores/model'
import HandleAttach from '@/components/plugin/HandleAttach.vue'
import HandleAttachUpload from '@/components/plugin/HandleAttachUpload.vue'
import HandleModel from '@/components/plugin/HandleModel.vue'
import HandleSearch from '@/components/plugin/HandleSearch.vue'
import HandleMcp from '@/components/plugin/HandleMcp.vue'
import HandleKnowledge from '../plugin/HandleKnowledge.vue'

// 模型存储
const modelStore = useModelStore()
const { readActiveModelInfo } = storeToRefs(modelStore)

// 定义事件
const emits = defineEmits(['submit-chatting', 'abort-chatting'])

// 外部参数
const props = defineProps({
  // 是否加载中
  loading: {
    type: Boolean,
    required: true,
  },
})

// 当前文本
const modelValue = defineModel('value', { type: String, required: true })

// 组件
const senderRef = ref()
const attachUploadRef = ref()

// 状态参数
const state = reactive({
  // 当前模型key
  modelKey: '',
  // 当前模型名称
  modelName: '',
})

// 选择文件
const onFileChoose = (file: File) => {
  attachUploadRef.value.upload(file)
}

// 发送消息
const onSenderSubmit = (text: string) => {
  if (!readActiveModelInfo.value) {
    message.error('请先选择一个模型')
    return
  }
  senderRef.value.blur()
  modelValue.value = ''
  emits('submit-chatting', text)
}

// 切换模型
const onChangeModel = (model: { id: string; name: string }) => {
  state.modelKey = model.id
  state.modelName = model.name
}

// 取消发送
const onSenderAbort = () => {
  emits('abort-chatting')
}
</script>
<template>
  <Sender
    ref="senderRef"
    v-model:value="modelValue"
    placeholder="您有什么想法或问题，请告诉我"
    :auto-size="true"
    :actions="false"
    @submit="onSenderSubmit"
    @cancel="onSenderAbort"
  >
    <template #header>
      <Sender.Header :open="!!state.modelName" :title="'@' + state.modelName">
        <HandleAttachUpload ref="attachUploadRef" />
      </Sender.Header>
    </template>
    <template
      #footer="{
        info: {
          components: { SendButton, LoadingButton },
        },
      }"
    >
      <div class="flex justify-between mt-4">
        <div class="left-action">
          <!-- 上传附件 -->
          <HandleAttach @change="onFileChoose" />
          <a-divider type="vertical" />
          <!-- 模型切换 -->
          <HandleModel @change-model="onChangeModel" />
          <!-- 联网搜索 -->
          <HandleSearch />
          <!-- MCP服务器 -->
          <HandleMcp />
          <!-- 知识库 -->
          <HandleKnowledge />
        </div>
        <div class="right-action">
          <!-- <component :is="SpeechButton" /> -->
          <component :is="LoadingButton" v-if="props.loading" type="default" :disabled="false" />
          <template v-else>
            <a-tooltip v-if="!readActiveModelInfo" title="请先选择一个模型" placement="top">
              <component :is="SendButton" type="primary" disabled />
            </a-tooltip>
            <a-tooltip v-else-if="!modelValue" title="请输入您的问题" placement="top">
              <component :is="SendButton" type="primary" disabled />
            </a-tooltip>
            <component v-else :is="SendButton" type="primary" />
          </template>
        </div>
      </div>
    </template>
  </Sender>
</template>
<style lang="scss" scoped>
:deep(.ant-sender-header-header) {
  color: var(--vas-title-color);
}
:deep(.ant-sender-header-content) {
  padding: 0 !important;
}
.left-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.right-action {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}
</style>
